<template>
	<div class="city_body">
		<div class="city_list" ref="city_body">
			<Loading v-if="isLoading" />
			<Scroller ref="city_list">
				<div>
					<div class="city_hot">
						<h2>热门城市</h2>
						<ul class="clearfix">
							<li v-for="hotCity in hotCities"  @click="handleToCity(hotCity.nm,hotCity.id)" :key="hotCity.id">{{hotCity.nm}}</li>
						</ul>
					</div>

					<div class="city_sort" ref="city_sort">
						<div v-for="(item,index) in citiesList" :key='index'>
							<h2>{{item.index}}</h2>
							<ul>
								<li v-for="(city , index) in item.list" @click="handleToCity(city.nm,city.id)"  :key="index">{{city.nm}}</li>
							</ul>
						</div>
					</div>
				</div>
			</Scroller>
		</div>
		<div class="city_index">
			<ul>
				<li v-for="(item,index) in citiesList" @click="handleCity(index)" :key="item.index">{{item.index}}</li>
			</ul>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				citiesList: [], //所有城市
				hotCities: [], //热门城市
				isLoading: true
			}
		},
		mounted() {//当DOM挂载完毕时 获取本地储存中的所有城市 和 热门城市数据
			let citiesList = window.localStorage.getItem('citiesList')
			let hotCities = window.localStorage.getItem('hotCities')
			if (citiesList && hotCities) {
				this.citiesList = JSON.parse(citiesList)
				this.hotCities = JSON.parse(hotCities)
				this.isLoading = false;
			} else {
				//获取城市数据
				this.axios.get('/cities').then(res => {
					if (res.data.code === 0) {
						//城市的数据
						let cities = res.data.data.data
						this.isLoading = false
						// [{index:A,list:[{nm:'啊城',id=123,py:'acheng'}]}]
						let {//拿到格式化好的 所有城市数组和热门城市数组
							citiesList,
							hotCities
						} = this.formatCityList(cities);//改造城市数据的函数方法
						this.citiesList = citiesList;//更新到vue的data数据中
						this.hotCities = hotCities;
						//本地存储城市数据和热门城市数据 因为这样就不需要要在每次请求数据了 直接在本地去找
						window.localStorage.setItem('citiesList', JSON.stringify(citiesList))
						window.localStorage.setItem('hotCities', JSON.stringify(hotCities))
					}
				})
			}
			
		},
		methods: {
			
			//格式城市数组方法
			formatCityList(cities) {
				let hotCities = []; //热门城市
				let citiesList = []; //所有城市
				
				//push热门城市
				for (let i = 0; i < cities.length; i++) {
					if (cities[i].isHot === 1) {//判断当前城市有isHot属性嘛？
						hotCities.push(cities[i])
					}
				}

				//push城市
				for (let i = 0; i < cities.length; i++) {
					//提取每个城市的首个字母并转大写 需要对应index下的值
					let firstLetter = cities[i].py.substring(0, 1).toUpperCase();
					//条用方法 判断对象里面是否存在Index
					if (toCom(firstLetter)) { //返回true说明没有index 则新的添加index
					
						citiesList.push({
							index: firstLetter,
							list: [{
								nm: cities[i].nm,
								id: cities[i].id
							}]
						})
					} else { //有index 添加城市
					
						for (let k = 0; k < citiesList.length; k++) {//循环所有的城市数组
							if (citiesList[k].index === firstLetter) {//判断当前的对象的index是不是我这个首字母大写的城市
								citiesList[k].list.push({
									nm: cities[i].nm,//城市名字
									id: cities[i].id//城市id
								})
							}
						}
					}
				}

				//让城市数组中每个对象的index从A-Z排序 用sort方法
				citiesList.sort((n1, n2) => {//n1 == 第一个对象 n2下一个对象
					if (n1.index > n2.index) {//判断前一个对象和后一个对象的Index比较大写
						return 1;
					} else if (n1.index < n2.index) {
						return -1
					} else {
						return 0
					}
				})

				//循环citiesList判断里面是否有index这个属性
				function toCom(firstLetter) {
					for (let j = 0; j < citiesList.length; j++) {
						if (citiesList[j].index == firstLetter) {
							//有则返回false
							return false;
						}
					}
					// 没有则返回true
					return true;
				}
				//导出我们需要的格式化好的城市数组和热门城市数组
				return {
					citiesList,
					hotCities
				}
				

			},

			//跳转到指定城市索引
			handleCity(index) { //改变滚动条的位置
				var h2 = this.$refs.city_sort.getElementsByTagName('h2') //获取所有h2标签DOM元素
				// this.$refs.city_sort.parentNode.scrollTop = h2[index].offsetTop
				//获取Scroller子组件的方法
				this.$refs.city_list.toScrollTop(-h2[index].offsetTop)//获取到点击当前的h2DOM元素的offsetTop位置 并通过toScrollTop函数方法跳转
			},
			
			//点击当前城市 将我们的当前位置用vuex来管理
			handleToCity(nm,id){
				//修改我们的状态管理 注意路径 city/CITY_INFO
				this.$store.commit('city/CITY_INFO',{nm,id})
				//因为刷新就没有了 所以本地存储当前的城市
				window.localStorage.setItem('nowNm',nm)
				window.localStorage.setItem('nowId',id)
				//编程式路由
				this.$router.push('/movies/nowPlaying')
			}
		},
	}
</script>

<style scoped>
	#content .city_body {
		margin-top: 45px;
		display: flex;
		width: 100%;
		position: absolute;
		top: 0;
		bottom: 0;
		padding-bottom: 0px;
	}
	.clearfix::after{
		content: "";
		display: block;
		overflow: hidden;
		clear: both;
	}
	.city_body .city_list {
		flex: 1;
		overflow: auto;
		background: #f9f9f9;
	}

	.city_body .city_list::-webkit-scrollbar {
		background-color: transparent;
		width: 0;
	}

	.city_body .city_hot {
		margin-top: 20px;
		overflow: hidden;
	}

	.city_body .city_hot h2 {
		padding-left: 15px;
		line-height: 30px;
		font-size: 14px;
		background: #F0F0F0;
		font-weight: normal;
	}

	.city_body .city_hot ul li {
		float: left;
		background: #fff;
		width: 29%;
		height: 33px;
		margin-top: 15px;
		margin-left: 3%;
		padding: 0 4px;
		border: 1px solid #e6e6e6;
		border-radius: 3px;
		line-height: 33px;
		text-align: center;
		box-sizing: border-box;
	}

	.city_body .city_sort div {
		margin-top: 20px;
	}

	.city_body .city_sort h2 {
		padding-left: 15px;
		line-height: 30px;
		font-size: 14px;
		background: #F0F0F0;
		font-weight: normal;
	}

	.city_body .city_sort ul {
		padding-left: 10px;
		margin-top: 10px;
	}

	.city_body .city_sort ul li {
		line-height: 30px;
		line-height: 30px;
	}

	.city_body .city_index {
		width: 20px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		text-align: center;
		border-left: 1px #e6e6e6 solid;
	}

	.city_body .city_index li {
		margin-bottom: 6px;
	}
</style>
